<template>
  <div class="financeCount">
    <div class="title">
      <h3>财务管理</h3>
    </div>
    <div class="el-div-info">
      <el-col :span="4" class="info-box" style="background-color: #CEDD79;">
        <el-col :span="20" class="space">消费总金额</el-col>
        <el-col :span="10" class="space">￥253</el-col>
        <el-col :span="14" class="space" />
      </el-col>
      <el-col :span="4" class="info-box el-col-offset-2" style="background: #A3D2F6;">
        <el-col :span="20" class="space">待审核商户提现金额</el-col>
        <el-col :span="10" class="space">￥77</el-col>
        <el-col :span="14" class="space button-space">
          <el-button type="view" @click="withdrawDetail">查看详情</el-button>
        </el-col>
      </el-col>
      <el-col :span="4" class="info-box el-col-offset-2" style="background: #FFDA44;">
        <el-col :span="20" class="space">商户已提现金额</el-col>
        <el-col :span="10" class="space">￥200</el-col>
        <el-col :span="14" class="space button-space">
          <el-button type="view" @click="withdrawDetail">查看详情</el-button>
        </el-col>
      </el-col>
      <el-col :span="8" class="info-box" />
      <el-col :span="4" class="info-box" style="background: #7EAE5D;">
        <el-col :span="20" class="space">商户分成收益金额</el-col>
        <el-col :span="10" class="space">￥77</el-col>
        <el-col :span="14" class="space button-space">
          <el-button type="view" @click="shareStatistics">查看详情</el-button>
        </el-col>
      </el-col>
      <el-col :span="4" class="info-box el-col-offset-2" style="background: #71D4D4;">
        <el-col :span="20" class="space">商户待结算金额</el-col>
        <el-col :span="10" class="space">￥67</el-col>
        <el-col :span="14" class="space button-space">
          <el-button type="view" @click="accountRecord">查看详情</el-button>
        </el-col>
      </el-col>
    </div>
    <div class="detail-data">
      <div class="tableHead">
        <h5>|&nbsp;详细数据</h5>
      </div>
      <el-table ref="elTable" :data="tableBind" :fit="true">
        <el-table-column label="时间" prop="time" />
        <el-table-column label="订单总额" prop="orderCount" />
        <el-table-column label="在线租售" prop="onlineSale" />
        <el-table-column label="服务" prop="service" />
        <el-table-column label="分成金额" prop="shareAmount" />
        <el-table-column label="已提现金额" prop="withdrawn" />
      </el-table>
      <div class="ele-div-footer">
        <div class="footer-left" />
        <el-pagination
          class="pagination-right"
          :page-sizes="[15, 20, 25, 30]"
          :page-size="15"
          :total="400"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FinanceCount',
  data() {
    return {
      tableBind: [{
        time: '2019-04',
        orderCount: '66',
        onlineSale: '66',
        service: '66',
        shareAmount: '25',
        withdrawn: '25'
      },
      {
        time: '2019-03',
        orderCount: '66',
        onlineSale: '66',
        service: '66',
        shareAmount: '25',
        withdrawn: '25'
      },
      {
        time: '2019-02',
        orderCount: '66',
        onlineSale: '66',
        service: '66',
        shareAmount: '25',
        withdrawn: '25'
      },
      {
        time: '2019-01',
        orderCount: '66',
        onlineSale: '66',
        service: '66',
        shareAmount: '25',
        withdrawn: '25'
      }
      ]
    }
  },
  methods: {
    withdrawDetail() {
      this.$router.push('withdrawRecord')
    },
    shareStatistics() {
      this.$router.push('shareStatistics')
    },
    accountRecord() {
      this.$router.push('accountRecord')
    }
  }
}
</script>

<style lang="scss" scoped>
  .financeCount {
    padding: 0px 100px;

    .el-div-info {
      margin: 20px 0px;
      height: 400px;

      .info-box {
        height: 150px;
        padding: 10px 20px;
        border-radius: 10px;
        margin-top: 20px;
        color: #FFFFFF;

        .space {
          margin: 20px 0px;
        }

        .button-space {
          margin-top: 10px;
        }
      }
    }

    .detail-data {
      width: 100%;
      height: 320px;
      border: solid 1px #F3F3F3;
      margin: 20px 0px;
    }
  }
</style>
